import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

import HelloWorld from '../components/HelloWorld.vue'
import News from '../components/demo_news.vue'
import NotFound from '../components/demo_NotFound.vue'
import Article from '../components/demo_article.vue'
import Films from '../components/demo_films.vue'

import User from '../components/demo_user.vue'
import Hengban from '../components/demo_hengban.vue'
import Shuban from '../components/demo_shuban.vue'

import ShopDefault from '../components/demo_default.vue'
import ShopTop from '../components/demo_top.vue'
import ShopFooter from '../components/demo_footer.vue'

const routes = [
    { path: '/', component: HelloWorld },
    // { path: '/about', component: About },
    // 动态路由
    {
        path: '/news/:nid',
        name: "newsPage",
        component: News
    },
    {
        path: '/article/:aid(\\d+)', //:aid被正则限定为数字
        component: Article
    },
    {
        path: '/films/:fid+', //:fid可以传1个或多个,如localhost:3000/films/123/456
        component: Films
    },
    {
        path: '/:path(.*)', //正则匹配
        component: NotFound
    },

    // 嵌套路由
    {
        path: '/user',
        component: User,
        children: [
            {
                path: 'hengban',
                component: Hengban
            },
            {
                path: 'shuban',
                component: Shuban
            },
        ],
        // 单独路由守卫
        beforeEnter: (to, from, next) => {
            console.log(to)
            next()
        }
    },

    // 命名视图
    {
        path: '/shop',
        // 别名数组，功能上等价于重定向，但不改变路径名
        alias: ["/ykhshop", "/abcshop", "/dddshop"],
        // 在 router-view 处设置和路由名字相同的name属性
        components: {
            default: ShopDefault,//默认
            ShopTop: ShopTop,
            ShopFooter: ShopFooter,
        }
    },

    // 重定向
    {
        path: '/mall',
        // 写法1
        redirect: "/shop",

        // 写法2
        // redirect: () => {
        //     return { path: '/shop' }
        // }
    },
]

const router = createRouter({
    // 哈希模式的路径中从#开始，后面的所有路径都叫做路由的哈希值
    // history模式的路径直接拼接在端口号后面，后面的路径也会随着http请求发给服务器
    // history: createWebHashHistory(), 
    history: createWebHistory(),
    routes,
})

// 路由守卫
router.beforeEach((to, from, next) => {
    // console.log(to)
    next()
    // return false
})

export default router